<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 表单 -->
        <el-form ref="form" label-width="80px">
          <div class="add">
            <el-form-item label="学科名称">
              <el-input
                style="width: 200px"
                size="small"
                v-model="input"
              ></el-input>
              <el-button
                size="medium"
                style="margin-left: 10px"
                @click="clearMedium"
                >清除</el-button
              >
              <el-button type="primary" size="medium" @click="searchPrimary"
                >搜索</el-button
              >

              <div class="addbar">
                <el-button
                  type="success"
                  size="medium"
                  typeClick="success"
                  @click="append('success')"
                >
                  <i class="el-icon-edit" style="margin-right: 5px"></i>
                  新增学科
                </el-button>
              </div>
            </el-form-item>
          </div>
        </el-form>
        <!-- 阴影部分 -->
        <div>
          <el-alert
            :title="`数据一共 ${total} 条`"
            type="info"
            show-icon
            :closable="false"
          >
          </el-alert>
        </div>
        <!-- 表格 -->
        <el-table :data="list" style="width: 100%">
          <el-table-column type="index" label="序号" width="60">
          </el-table-column>
          <el-table-column prop="subjectName" label="学科名称" width="180">
          </el-table-column>
          <el-table-column prop="username" label="创建者" width="120">
          </el-table-column>
          <el-table-column prop="addDate" label="创建日期" width="200" :formatter="formatterDate">
          </el-table-column>
          <el-table-column
            prop="isFrontDisplay"
            label="前台是否显示"
            width="150"
            :formatter="filterTag"
          >
          </el-table-column>
          <el-table-column
            prop="twoLevelDirectory"
            label="二级目录"
            width="150"
          >
          </el-table-column>
          <el-table-column prop="tags" label="标签" width="200">
          </el-table-column>
          <el-table-column prop="totals" label="题目数量" width="200">
          </el-table-column>
          <el-table-column label="操作" width="350">
            <template #default="{ row }">
              <el-button type="text" @click="subjectCF(row)">学科分类</el-button>
              <el-button type="text" @click="subjectLable(row)">学科标签</el-button>
              <el-button
                type="text"
                typeClick="modify"
                @click="append('modify', row.id)"
                >修改</el-button
              >
              <el-button type="text" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="el-pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="prev, pager, next, sizes, jumper"
            :current-page="page"
            :page-size="pageSize"
            :total="total"
            :page-sizes="pages"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <!-- 弹出框 -->
    <el-dialog :title="drawerTitle" :visible.sync="showAdd" width="400px">
      <el-form
        label-width="auto"
        :rules="rules"
        ref="ruleForm"
        :model="ruleForm"
      >
        <el-form-item label="学科名称" prop="subjectName">
          <el-input
            v-model="ruleForm.subjectName"
            width="250px"
            placeholder="请输入学科名称"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model="switchValue"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
        <el-form-item>
          <div class="dialog-footer">
            <el-button @click="cancellation">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, detail, update, remove } from '../../api/hmmm/subjects'
import { Message } from 'element-ui'
import { formatDate } from '../components/timeDate.js'
export default {
  data () {
    return {
      list: [], // 从接口处取回
      ruleForm: {
        subjectName: '',
        isFrontDisplay: 1 // 从接口处取回
      },
      page: 1,
      pageSize: 10,
      total: 10,
      pages: [5, 10, 20, 50],
      subjectName: '',
      input: '',
      showAdd: false,
      switchValue: true,
      rules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      },
      typeClick: ''
    }
  },
  created () {
    this.initData()
    // setTimeout(() => {
    // ajax
    //   const res = {
    //     name: 'abc',
    //     list: ['潜江', '滨海', '北京'],
    //     province: '北京'
    //   }
    //   this.list = res.list
    //   this.form.name = res.name
    //   this.form = { name: res.name }
    //   // this.$set(this.form, 'province', res.province)
    //   this.form.province = res.province
    // })
  },
  computed: {
    drawerTitle () {
      let title = '标题'
      if (this.typeClick === 'success') title = '新增学科'
      if (this.typeClick === 'modify') title = '修改学科'
      return title
    }
  },
  methods: {
    // 获取列表接口
    async initData () {
      const { data } = await list({
        page: this.page,
        pagesize: this.pageSize,
        pages: this.pages,
        subjectName: this.subjectName
      })
      console.log(data)
      this.list = data.items
      this.total = data.counts
    },
    // 页尺寸
    handleSizeChange (val) {
      console.log(val)
      this.pageSize = val
      this.initData()
    },
    // 当前页数
    handleCurrentChange (val) {
      // console.log(val)
      this.page = val
      this.initData()
    },

    // 时间格式
    formatterDate (row) {
      // console.log(row)
      return formatDate(row.addDate)
    },
    // 前台是否显示
    filterTag (value, row) {
      // console.log(value.isFrontDisplay)
      return value.isFrontDisplay ? '是' : '否'
    },
    // 清除
    clearMedium () {
      this.input = ''
      this.initData()
    },
    // 搜索
    searchPrimary () {
      this.page = 1
      this.subjectName = this.input
      this.initData()
    },
    // 关闭弹窗清空表单
    handleClose () {
      this.ruleForm = {
        subjectName: ''
      }
    },
    // // 单击新增显示隐藏弹出框
    // // 新增/修改
    async append (type, id) {
      // 新增
      this.showAdd = true
      this.typeClick = type
      this.handleClose()
      // 修改
      if (type === 'modify') {
        const res = await detail({ id })
        console.log(res)
        this.ruleForm = {
          ...res.data
        }
      }
    },
    // 点击取消
    cancellation () {
      this.showAdd = false
      this.$refs.ruleForm.resetFields()
    },
    // 点击确定
    async submit () {
      try {
        await this.$refs.ruleForm.validate()
        // 新增接口
        if (this.typeClick === 'success') {
          await add({
            subjectName: this.ruleForm.subjectName,
            isFrontDisplay: this.switchValue
          })
          Message.success('添加成功')
        } else {
        // 修改
          const { id, subjectName, isFrontDisplay } = this.ruleForm
          await update({
            id,
            subjectName,
            isFrontDisplay: !isFrontDisplay
          })
          Message.success('修改成功')
        }
        this.page = 1
        this.cancellation()
        this.initData()
      } catch (error) {
        console.log(error)
      }
    },
    // 删除
    del (id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // console.log(id)
        await remove({ id })
        this.initData()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 跳转目录
    subjectCF (row) {
      this.$router.push(`directorys?id=${row.id}&name=${row.subjectName}`)
    },
    // 跳转标签
    subjectLable (row) {
      this.$router.push(`tags?id=${row.id}&name=${row.subjectName}`)
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 0;
  margin: 0;
}
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
.addbar {
  float: right;
  width: 10%;
}
.dialog-footer {
  text-align: right;
}
</style>
